<template>
  <div class="weather-display">
    <div class="weather-icon">
      <span v-if="weatherData.icon">{{ weatherData.icon }}</span>
      <span v-else>🌤️</span>
    </div>
    <div class="weather-info">
      <div class="weather-temp">{{ weatherData.temperature }}</div>
      <div class="weather-desc">{{ weatherData.description }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 天气相关的响应式数据
const weatherData = ref({
  temperature: '--',
  description: '获取中...',
  icon: '🌤️',
  location: ''
})

// 获取天气数据的函数
const getWeatherData = async () => {
  try {
    // 获取用户地理位置
    // const position = await getCurrentPosition()
    // const { latitude, longitude } = position.coords
    // console.log('获取位置成功:', latitude, longitude)
    // 使用免费的天气API获取天气信息
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=18.3&lon=110.02&appid=c05a0f8feb2d11e74d4fd8ea75a8df9f&units=metric&lang=zh_cn`)

    if (!response.ok) {
      // 如果API调用失败，使用模拟数据
      weatherData.value = {
        temperature: '22°C',
        description: '晴朗',
        icon: '☀️',
        location: '当前位置'
      }
      return
    }

    const data = await response.json()

    // 根据天气代码选择合适的图标
    const weatherIcon = getWeatherIcon(data.weather[0].id)

    weatherData.value = {
      temperature: `${Math.round(data.main.temp)}°C`,
      description: data.weather[0].description,
      icon: weatherIcon,
      location: data.name
    }
  } catch (error) {
    console.log('获取天气信息失败:', error)
    // 使用默认天气数据
    weatherData.value = {
      temperature: '22°C',
      description: '晴朗',
      icon: '☀️',
      location: '当前位置'
    }
  }
}

// 获取用户地理位置
const getCurrentPosition = () => {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error('浏览器不支持地理位置'))
      return
    }

    navigator.geolocation.getCurrentPosition(resolve, reject, {
      timeout: 10000,
      enableHighAccuracy: true
    })
  })
}

// 根据天气代码返回对应的图标
const getWeatherIcon = (weatherId) => {
  if (weatherId >= 200 && weatherId < 300) return '⛈️' // 雷暴
  if (weatherId >= 300 && weatherId < 400) return '🌦️' // 毛毛雨
  if (weatherId >= 500 && weatherId < 600) return '🌧️' // 雨
  if (weatherId >= 600 && weatherId < 700) return '❄️' // 雪
  if (weatherId >= 700 && weatherId < 800) return '🌫️' // 雾霾
  if (weatherId === 800) return '☀️' // 晴朗
  if (weatherId > 800) return '☁️' // 多云
  return '🌤️' // 默认
}

// 组件挂载时获取天气数据
onMounted(() => {
  getWeatherData()
})
</script>

<style lang="scss" scoped>
.weather-display {
  display: flex;
  align-items: center;
  gap: 0.52vw; // 10px
  margin-left: 2.2vw;

  .weather-icon {
    font-size: 1.56vw; // 30px
    filter: drop-shadow(0 0 0.52vw rgba(255, 255, 255, 0.5)); // 0 0 10px
    animation: weatherFloat 3s ease-in-out infinite;
  }

  .weather-info {
    display: flex;
    flex-direction: column;
    gap: 0.1vh; // 1px

    .weather-temp {
      font-size: 0.94vw; // 18px
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0 0 0.26vw rgba(0, 174, 255, 0.6); // 0 0 5px
      white-space: nowrap;
    }

    .weather-desc {
      font-size: 0.63vw; // 12px
      color: rgba(255, 255, 255, 0.8);
      text-shadow: 0 0 0.21vw rgba(255, 255, 255, 0.3); // 0 0 4px
      white-space: nowrap;
    }
  }

  &:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0.26vw 1.56vw rgba(0, 174, 255, 0.5); // 0 5px 30px
    transform: translateY(-0.1vh); // -1px
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@keyframes weatherFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.21vw); // -4px
  }
}
</style>